<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<!-- 		1.按钮和DIV的单击事件（三种绑定方式）
		2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮
		
		任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#div2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			#div4{
				width: 100px;
				height: 100px;
				background-color: darkmagenta;
			}
		</style>
	</head>
	<body>
		<p>第一题</p>
		<button type="button" onclick="click1()">按钮1</button>
		<div id="div1" >
			
		</div>
		<div id="div2" onclick="click2()">
			
		</div>
		<p>第二题</p>
		<div id="div3" onmouseenter="click3()" >
			
		</div>
		<p>第三题</p>
		<form action="" method="post">
			用户名：<input type="text" value="" id="text1" onfocus="focus1()" onblur="blur11()" br/>
			密码  ：<input type="password" value="" name="" id="pwd1" onfocus="focus2()" onblur="blur12()"/>
		</form>
		<button type="button" onclick="click11()">提交</button>
		<p>第四题</p>
		<div id="div4">
			
		</div>
		<button type="button" onclick="click4()">添加监控</button>
		<button type="button" onclick="click5()">删除监控</button>
	</body>
	<script type="text/javascript">
	// 1.按钮和DIV的单击事件（三种绑定方式）	
	function click1(){
		console.log('第一种')
	}
	
	document.getElementById('div1').onclick=function(){
			console.log('第二种')
	};
	function three(){
		console.log('第三种')
	}
	function click2(){
		document.getElementById('div2').addEventListener('click',three)
	}
	// 		2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	function click3(){
		console.log('进入div3');
	}
	document.getElementById('div3').onmouseleave=function(){
		console.log('离开div3');
	}
	document.getElementById('div3').addEventListener('mousemove',function(){
		console.log('在div3中');
	})
	// 		3.登入页面
	// 		用户名输入框，
	// 		密码输入框，
	// 		提交按钮
			
	// 		任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	function focus1(){
			console.log('用户在输入名称');
		}
	// 		         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	function blur11(){
		if(text1.value == ''){
			alert('没有输入用户名');
		}
	}
	// 		         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	function focus2(){
		console.log('用户在输入密码');
	}
	// 		         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	function blur12(){
		if(pwd1.value == ''){
			alert('没有输入密码');
		}
	}
	// 		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	// 		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	function click11(){
		if(text1.value == '' && pwd1.value == ''){
			console.log('用户名和密码为空');
		}else if(text1.value ==''){
			console.log('用户名为空');
		}else if(pwd1.value==''){
			console.log('密码为空');
		}
	}
	
	// 		4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能
		function click4(){
			document.getElementById('div4').addEventListener('mousemove',move4)
		}
		function click5(){
			document.getElementById('div4').removeEventListener('mousemove',move4)
		}
		function move4(){
			console.log('在div4中')
		}
		
	</script>
</html>
